<template>
  <div class="my-nav-container-collection">
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <div class="content-img" @click="openModal(item)">
          <img :src="getAssetImage(item.img)" alt="" />
        </div>
        <div class="content-title">{{ item.title }}</div>
        <div class="contentlist">
          <img :src="getAssetImage(item.headImg)" alt="" />
          <div class="contentlist-name">{{ item.name }}</div>
          <div>
            <button @click="() => like(item)" class="like">
              {{ item.like === 1 ? "❤️" : "🤍" }}
            </button>
            <span>{{ item.likes }}</span>
          </div>
        </div>
      </li>
    </ul>
    <Modal
      v-if="isModalOpen"
      :items="items"
      @close="closeModal"
      :currentItem="selectedItem"
    @update-comments="addComment"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import Modal from "@/components/Modal.vue";
const items = ref([
  {
    img: "/src/assets/img/img02.jpg",
    title: "这是标题",
    headImg: "/src/assets/img/my_head.png",
    name: "作者名",
    like: 1,
    likes: 1131,

    postContent:
      "这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏",
    myAvatar: "/src/assets/img/my_head.png",
    createdAt: "05-22",
    comments: [
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img03.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img03.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img03.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img03.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },

    ]
  },
  {
    img: "/src/assets/img/img02.jpg",
    title: "这是标题",
    headImg: "/src/assets/img/my_head.png",
    name: "作者名",
    like: 0,
    likes: 1131,

    postContent:
      "这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏",
    myAvatar: "/src/assets/img/my_head.png",
    createdAt: "05-22",
    comments: [
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img03.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img03.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img03.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img03.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },

    ]
  },
  {
    img: "/src/assets/img/img02.jpg",
    title: "这是标题",
    headImg: "/src/assets/img/my_head.png",
    name: "作者名",
    like: 0,
    likes: 1131,

    postContent:
      "这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏",
    myAvatar: "/src/assets/img/my_head.png",
    createdAt: "05-22",
    comments: [
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img03.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img03.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img03.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img03.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },

    ]
  },
  {
    img: "/src/assets/img/img03.jpg",
    title: "这是标题",
    headImg: "/src/assets/img/my_head.png",
    name: "作者名",
    like: 0,
    likes: 122,

    postContent:
      "这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏",
    myAvatar: "/src/assets/img/my_head.png",
    createdAt: "05-22",
    comments: [
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },

    ]
  },
  {
    img: "/src/assets/img/img03.jpg",
    title: "这是标题",
    headImg: "/src/assets/img/my_head.png",
    name: "作者名",
    like: 0,
    likes: 122,

    postContent:
      "这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏",
    myAvatar: "/src/assets/img/my_head.png",
    createdAt: "05-22",
    comments: [
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },

    ]
  },
  {
    img: "/src/assets/img/img03.jpg",
    title: "这是标题",
    headImg: "/src/assets/img/my_head.png",
    name: "作者名",
    like: 1,
    likes: 122,

    postContent:
      "这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏",
    myAvatar: "/src/assets/img/my_head.png",
    createdAt: "05-22",
    comments: [
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },

    ]
  },
  {
    img: "/src/assets/img/img01.jpg",
    title: "这是标题",
    headImg: "/src/assets/img/my_head.png",
    name: "作者名",
    like: 0,
    likes: 122,

    postContent:
      "这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏",
    myAvatar: "/src/assets/img/my_head.png",
    createdAt: "05-22",
    comments: [
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },

    ]
  },
  {
    img: "/src/assets/img/img02.jpg",
    title: "这是标题",
    headImg: "/src/assets/img/my_head.png",
    name: "作者名",
    like: 1,
    likes: 1131,

    postContent:
      "这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏",
    myAvatar: "/src/assets/img/my_head.png",
    createdAt: "05-22",
    comments: [
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img03.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img03.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img03.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img03.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },

    ]
  },
  {
    img: "/src/assets/img/img03.jpg",
    title: "这是标题",
    headImg: "/src/assets/img/my_head.png",
    name: "作者名",
    like: 0,
    likes: 122,

    postContent:
      "这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏",
    myAvatar: "/src/assets/img/my_head.png",
    createdAt: "05-22",
    comments: [
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },

    ]
  },
  {
    img: "/src/assets/img/img03.jpg",
    title: "这是标题",
    headImg: "/src/assets/img/my_head.png",
    name: "作者名",
    like: 0,
    likes: 122,

    postContent:
      "这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏",
    myAvatar: "/src/assets/img/my_head.png",
    createdAt: "05-22",
    comments: [
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },

    ]
  },
  {
    img: "/src/assets/img/img03.jpg",
    title: "这是标题",
    headImg: "/src/assets/img/my_head.png",
    name: "作者名",
    like: 0,
    likes: 122,

    postContent:
      "这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏",
    myAvatar: "/src/assets/img/my_head.png",
    createdAt: "05-22",
    comments: [
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容，这是评论内容，这是评论内容，这是评论内容，这是评论内容，这是评论内容，这是评论内容，这是评论内容，这是评论内容，这是评论内容，这是评论内容，这是评论内容，这是评论内容，这是评论内容，这是评论内容，这是评论内容，这是评论内容，这是评论内容，这是评论内容，这是评论内容，这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },

    ]
  },
  {
    img: "/src/assets/img/img01.jpg",
    title: "这是标题",
    headImg: "/src/assets/img/my_head.png",
    name: "作者名",
    like: 0,
    likes: 122,

    postContent:
      "这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏",
    myAvatar: "/src/assets/img/my_head.png",
    createdAt: "05-22",
    comments: [
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },

    ]
  },
  {
    img: "/src/assets/img/img02.jpg",
    title: "这是标题",
    headImg: "/src/assets/img/my_head.png",
    name: "作者名",
    like: 0,
    likes: 1131,

    postContent:
      "这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏",
    myAvatar: "/src/assets/img/my_head.png",
    createdAt: "05-22",
    comments: [
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img03.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img03.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img03.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img03.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },

    ]
  },
  {
    img: "/src/assets/img/img03.jpg",
    title: "这是标题",
    headImg: "/src/assets/img/my_head.png",
    name: "作者名",
    like: 0,
    likes: 122,

    postContent:
      "这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏",
    myAvatar: "/src/assets/img/my_head.png",
    createdAt: "05-22",
    comments: [
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },

    ]
  },
  {
    img: "/src/assets/img/img03.jpg",
    title: "这是标题",
    headImg: "/src/assets/img/my_head.png",
    name: "作者名",
    like: 0,
    likes: 122,

    postContent:
      "这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏",
    myAvatar: "/src/assets/img/my_head.png",
    createdAt: "05-22",
    comments: [
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },

    ]
  },
  {
    img: "/src/assets/img/img03.jpg",
    title: "这是标题",
    headImg: "/src/assets/img/my_head.png",
    name: "作者名",
    like: 0,
    likes: 122,

    postContent:
      "这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏",
    myAvatar: "/src/assets/img/my_head.png",
    createdAt: "05-22",
    comments: [
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },

    ]
  },
  {
    img: "/src/assets/img/img01.jpg",
    title: "这是标题",
    headImg: "/src/assets/img/my_head.png",
    name: "作者名",
    like: 0,
    likes: 122,

    postContent:
      "这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏这里是内容，超过三行的部分会隐藏",
    myAvatar: "/src/assets/img/my_head.png",
    createdAt: "05-22",
    comments: [
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },
        {
            avatar: "/src/assets/img/img02.jpg",
            name: "用户1",
            content: "这是评论内容，这是评论内容。",
            time: "1小时前",
            likes: 5,
            replies: 2,
        },
        {
            avatar: "/src/assets/img/img01.jpg",
            name: "用户2",
            content: "另一个评论内容。",
            time: "2小时前",
            likes: 3,
            replies: 1,
        },

    ]
  },
 
]);
const getAssetImage = (imgSrc) => new URL(imgSrc, import.meta.url).href;

const isModalOpen = ref(false);

const selectedItem = ref(items[0]);
const like = (item) => {
  item.like = item.like === 1 ? 0 : 1;
  item.likes += item.like === 1 ? 1 : -1;
};

const openModal = (item) => {
  selectedItem.value = item; // 设置当前选中的项
  isModalOpen.value = true; // 打开模态框
};

const closeModal = () => {
  isModalOpen.value = false; // 关闭模态框
};
const addComment = (newComment) => {
  const currentIndex = items.value.indexOf(selectedItem.value);
  if (currentIndex !== -1) {
    if (!items.value[currentIndex].comments) {
      items.value[currentIndex].comments = []; // 确保 comments 数组存在
    }
    items.value[currentIndex].comments.push(newComment); // 添加新评论
  } else {
    console.error('Selected item not found in items');
  }
};
</script>

<style scoped>

.close {
  position: absolute;
  top: 10px;
  right: 20px;
  color: white;
  font-size: 24px;
  cursor: pointer;
}
</style>
